<template>
	<view class="content">
		<!-- <view class="header">
			<view class="left">新建<u-icon name="plus-circle" size="44"></u-icon></view>
			<view class="center">商机名称222</view>
			<view class="right"></view>
		</view> -->
		<view style="height: calc(100% - 120rpx);overflow-y: scroll;">
			<u-card :title="item.biz1" :sub-title="item.traceTime" v-for="(item,index) of gressList" :key="index">
				<view class="" slot="body">
					<view class="u-body-item u-flex u-row-between u-p-b-0">
						<view class="u-body-item-title u-line-2">
							<view>跟踪类型：{{item.traceKind}}</view>
							<view>跟踪人：{{item.biz1}}</view>
						</view>
						<view class="u-body-item-title u-line-2">
							<view>跟踪状态：{{item.traceStauts}}</view>
							<view>联系电话：{{item.relConnectTel}}</view>
						</view>
						<view class="u-body-item-title u-line-2">
							<view>跟踪描述：{{item.traceDesc}}</view>
						</view>
						<view class="u-body-item-title u-line-2">
							<view>客户反馈意见：{{item.cusFeedback}}</view>
						</view>
					</view>
				</view>
				<view class="foot" slot="foot">
					<view class="foot-left">
						<!-- <u-button type="primary" size="medium" @click="gotoDetail">查看详情</u-button> -->
					</view>
					<view class="foot-right">
						<u-button size="medium" @click="contrl(item)">操作</u-button>
					</view>
				</view>
			</u-card>
			<u-empty text="暂无进程" mode="list" v-if="gressList.length === 0"></u-empty>
		</view>
		<!-- 底部按钮 -->
		<view class="footer">
			<u-button type="primary" @click="gotoDetail('add')">新建跟进</u-button>
		</view>
		<u-select v-model="ctrlShow" :list="ctrlList" @confirm="ctrlConfirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ctrlShow: false,
				title: '进程1',
				subTitle: '2020-05-15',
				gressList: [],
				crmBusiOppo: '',
				chooseGress: null,
				ctrlList: [
					{
						value: '1',
						label: '删除'
					},
					// {
					// 	value: '2',
					// 	label: '下订单'
					// },
					// {
					// 	value: '3',
					// 	label: '转正式客户'
					// }
				]
			};
		},
		onLoad(params) {
			this.crmBusiOppo = params.crmBusiOppo
			this.init();
		},
		onShow() {
			this.init();
		},
		methods: {
			init(){
				this.$api.user.queryOppoTraceByOppoid({
					busiOppoId: this.crmBusiOppo
				}).then((res) => {
					console.log("res",res);
					this.gressList = res;
					this.gressList.forEach((row) => {
						if(row.traceStauts === '1'){
							row.traceStauts = '售前'
						}else if(row.traceStauts === '2'){
							row.traceStauts = '售中'
						}else if(row.traceStauts === '3'){
							row.traceStauts = '售后'
						}
					})
				})
			},
			gotoDetail(type){
				uni.navigateTo({
					url: '/pages/busi/progress-detail?mode=' + type + '&crmBusiOppo=' + this.crmBusiOppo
				})
			},
			contrl(item){
				this.ctrlShow = true
				this.chooseGress = item
			},
			ctrlConfirm(params){
				console.log(params);
				if(params[0].value === '1'){
					this.$api.user.delBusiOppoTrace({
						id: this.chooseGress.id
					}).then((res) => {
						console.log("res",res);
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
						setTimeout(() => {
							this.init()
						}, 1500)
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footer {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 0;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	.header{
		display: flex;
		height: 100rpx;
		margin-top: var(--status-bar-height);
		.right{
			width: 20%;
		}
		.center{
			width: 60%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
			font-size: 40rpx;
		}
		.left{
			width: 20%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #2b85e4;
			font-size: 30rpx;
			font-weight: bold;
		}
	}
	.content{
		height: 100vh;
		overflow-y: scroll;
		
	}
	.u-card-wrap { 
		background-color: $u-bg-color;
		padding: 1px;
	}
	
	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 10rpx 0rpx;
		display: flex;
		flex-direction: column;
	}
	::v-deep .u-card__head--left__title{
		font-weight: bold !important;
		font-size: 32rpx !important;
	}
	.u-body-item-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		font-size: 28rpx;
		margin: 10rpx 0;
	}
		
	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
	.foot{
		height: 40rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>
